<template>
	<view>
    <view class="header" id="header">
      <u-navbar :title="title" @leftClick="leftClick" bgColor="#ffffff" :titleStyle="titleStyle"
        :leftIconColor="leftIconColor" placeholder="true" />
        <view style="background-color: white;">
          <view class="business-hours">
            营业时间：{{params.startDateStr}} 至 {{ params.endDateStr }}
          </view>
          <uDropdown ref="uDropdown">
            <uDropdownItem v-model="value1" :title="labelTypeName?labelTypeName:options1[0].label"
              :options="options1" @change="typeChange">
            </uDropdownItem>
            <uDropdownItem v-model="value2" :title="labelSortName?labelSortName:options2[4].label"
              :options="options2" @change="sortChange">
            </uDropdownItem>

          </uDropdown>
        </view>
    </view>
    <scroll-view scroll-y :style="{ height: height + 'px'}">
      <view class="content" v-if="statsStoreDeviceTypeList.length > 0" v-for="(item,index) in statsStoreDeviceTypeList" :key="index">
        <view class="card-title">
          <view class="left">
            <u--image :showLoading="true" :src="`${staticFileUrl}/image/stats/device-logo.png`" width="60rpx"
              height="60rpx" shape="circle"></u--image>
            <view style="margin-left: 20rpx;">
              <text v-if="item.alias">{{item.alias}}号_</text>
              {{ item.deviceTypeName }}_{{ item.deviceNo }}
            </view>
          </view>
          <view class="right">
            收款：{{item.turnover}}元
          </view>
        </view>
        <view class="grid" v-if="item.deviceTypeId == deviceTypeEnum.SUPER_MONEY_CHANGER || item.deviceTypeId == deviceTypeEnum.CONVERTIBLE_CURRENCY_MACHINE">
          <u-grid :border="false" col="3">
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.ONLINE_REVENUE)">
              <text class="grid-title">{{item.scanCodePayTotalTurnover}}</text>
              <text class="grid-text">扫码收入</text>
            </u-grid-item>
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.CASH_INCOME)">
              <text class="grid-title">{{item.cashMoney}}</text>
              <text class="grid-text">现金收入</text>
            </u-grid-item>
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.DOU_YIN)">
              <text class="grid-title">{{item.turnoverDouYin}}</text>
              <text class="grid-text">抖音核销</text>
            </u-grid-item>
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.MEI_TUAN)">
              <text class="grid-title">{{item.turnoverMeiTuan}}</text>
              <text class="grid-text">美团核销</text>
            </u-grid-item>
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.ACTIVITY_REVENUE)">
              <text class="grid-title">{{item.activityTurnover}}</text>
              <text class="grid-text">活动收入</text>
            </u-grid-item>
          </u-grid>
          <view class="u-p-30" v-if="item.outCoinTotal > 0" >
            <view class="u-flex u-row-between" v-if="item.onLinePayOutCoinTotal > 0" @click="navStoreDevice(branchIdEnum.ON_LINE_ISSUE_COINS,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">扫码购币</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentOnLinePayOutCoinTotal" :showText="false" activeColor="#FEB661">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">{{ item.onLinePayOutCoinTotal }}</view>
            </view>
            <view class="u-flex u-row-between u-m-t-30" v-if="item.offLinePayOutCoinTotal > 0" @click="navStoreDevice(branchIdEnum.CASH_ISSUE_COINS,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">现金购币</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentOffLinePayOutCoin" :showText="false" activeColor="#6072FF">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">{{item.offLinePayOutCoinTotal}}</view>
            </view >
            <view class="u-flex u-row-between u-m-t-30" v-if="item.douYinOutCoinTotal > 0" @click="navStoreDevice(branchIdEnum.DOUYIN_COINS,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">抖音核销</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentDouYinOutCoin" :showText="false" activeColor="#FEB661">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">
                {{item.douYinOutCoinTotal}}
              </view>
            </view>
            <view class="u-flex u-row-between u-m-t-30" v-if="item.meiTuanOutCoinTotal > 0" @click="navStoreDevice(branchIdEnum.MEITUAN_COINS,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">美团核销</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentMeiTuanOutCoin" :showText="false" activeColor="#6072FF">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">{{item.meiTuanOutCoinTotal}}</view>
            </view>
            <view class="u-flex u-row-between u-m-t-30" v-if="item.fetchMemberOutCoinTotal > 0" @click="navStoreDevice(branchIdEnum.MEMBER_COINS,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">会员取币</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentFetchMemberOutCoin" :showText="false" activeColor="#FEB661">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">
                {{item.fetchMemberOutCoinTotal}}
              </view>
            </view>
            <view class="u-flex u-row-between u-m-t-30" v-if="item.weiXinVerifyTotalCoin > 0" @click="navStoreDevice(branchIdEnum.COIN_MACHINE_VERIFY,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">微信核销</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentWeiXinVerifyOutCoin" :showText="false" activeColor="#6072FF">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">{{item.weiXinVerifyTotalCoin}}</view>
            </view>
          </view>
        </view>
        <view class="grid" v-else-if="item.deviceTypeId == deviceTypeEnum.CRANE_MACHINE ||
                                      item.deviceTypeId == deviceTypeEnum.MULTI_SPLIT ||
                                      item.deviceTypeId == deviceTypeEnum.GASHAPON_MACHINE">
          <u-grid :border="false" col="3">
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.ONLINE_REVENUE)">
              <text class="grid-title">{{item.scanCodePayTotalTurnover}}</text>
              <text class="grid-text">扫码收入</text>
            </u-grid-item>
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDevice(branchIdEnum.GIFT_CONSUME,item.deviceNo)">
              <text class="grid-title">{{ item.giftConsume }}</text>
              <text class="grid-text">出礼数量</text>
            </u-grid-item>
<!--            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDevice(branchIdEnum.COIN_COINS_TOTAL,item.deviceNo)">-->
<!--              <text class="grid-title">{{ item.insertCoinTotal }}</text>-->
<!--              <text class="grid-text">投币数量</text>-->
<!--            </u-grid-item>-->
          </u-grid>
          <view class="u-p-l-30 u-p-r-30 u-m-t-20" v-if="item.insertCoinTotal > 0">
            <view class="u-flex u-row-between" v-if="item.insertCoinOnLine > 0" @click="navStoreDevice(branchIdEnum.ON_LINE_COIN,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">线上投币</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentInsertCoinOnLine" :showText="false" activeColor="#FEB661">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">{{item.insertCoinOnLine}}</view>
            </view>
            <view class="u-flex u-row-between u-m-t-30" v-if="item.insertCoinOffline > 0" @click="navStoreDevice(branchIdEnum.OFFLINE_COIN,item.deviceNo)">
              <view class="u-flex u-row-between">
                <view class="pay">线下投币</view>
                <view style="width: 367rpx;">
                  <u-line-progress :height="10" :percentage="item.percentInsertCoinOffline" :showText="false" activeColor="#6072FF">
                  </u-line-progress>
                </view>
              </view>
              <view class="income-type">{{item.insertCoinOffline}}</view>
            </view>
          </view>
        </view>
        <view class="grid" v-else-if="item.deviceTypeId == deviceTypeEnum.VENDING_MACHINE ||
                              item.deviceTypeId == deviceTypeEnum.SCREEN_VENDING_MACHINE ||
                              item.deviceTypeId == deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE">
          <u-grid :border="false" col="3">
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.ONLINE_REVENUE)">
              <text class="grid-title">{{item.scanCodePayTotalTurnover}}</text>
              <text class="grid-text">扫码收入</text>
            </u-grid-item>
<!--            <u-grid-item :customStyle="gridCustomStyle">-->
<!--              <text class="grid-title">{{ item.totalQuantity }}</text>-->
<!--              <text class="grid-text">出货数量</text>-->
<!--            </u-grid-item>-->
          </u-grid>
        </view>
        <view class="grid" v-else>
          <u-grid :border="false" col="3">
            <u-grid-item :customStyle="gridCustomStyle" @click="navStoreDeviceTurnoverDetails(item,branchIdEnum.ONLINE_REVENUE)">
              <text class="grid-title">{{item.scanCodePayTotalTurnover}}</text>
              <text class="grid-text">扫码收入</text>
            </u-grid-item>
          </u-grid>
        </view>
		  </view>
      <view v-if="statsStoreDeviceTypeList.length == 0">
        <u-empty text="暂无设备" mode="list" icon="http://cdn.uviewui.com/uview/empty/data.png">
        </u-empty>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	import uDropdown from '@/components/uDropdown/uDropdown.vue'
	import uDropdownItem from '@/components/uDropdownItem/uDropdownItem.vue'
	export default {
		components: {
			uDropdown,
			uDropdownItem
		},
		data() {
			return {
        height:0,
				deviceTypeEnum: this.$deviceTypeEnum,
				staticFileUrl: this.$configPath.staticFileUrl,
				title: '场地统计',
				titleStyle: 'color:rgb(0, 0, 0)',
				leftIconColor: 'rgb(0, 0, 0)',
				value1: -1,
				value2: 5,
				options1: [{
					label: '全部类型',
					value: '-1'
				}],
				options2: [{
						label: '投币数降序',
						value: 1
					},
					{
						label: '投币数升序',
						value: 2
					},
					{
						label: '出礼数降序',
						value: 3
					},
					{
						label: '出礼数升序',
						value: 4
					},
					{
						label: '机台收款降序',
						value: 5
					},
					{
						label: '机台收款升序',
						value: 6
					},
					{
						label: '机台号降序',
						value: 7
					},
					{
						label: '机台号升序',
						value: 8
					}
				],
				labelTypeName: '',
				labelSortName: '',
				device: {
					deviceTypeId: 16,
				},
        params:{
          dayType:0,
          startDateStr:'',
          endDateStr:'',
          mchStoreId:'',
          pageNum: 1,
          pageSize: 10,
        },
				gridCustomStyle: {
					background: 'rgba(101, 139, 254, 0.05)',
					borderRadius: '10rpx',
					padding: '20rpx',
          marginLeft:'25rpx',
					width: '200rpx'
				},
        statsStoreDeviceTypeList:[],
        statsStoreDeviceTypeListAll:[],
        branchIdEnum:this.$statsBranchIdEnum,
        statsType:2
			}
		},
		onLoad(options) {
			this.deviceType();
      if(options){
        // this.params.dayType = 1
        // this.params.startDateStr = '2024-01-01'
        // this.params.endDateStr = '2024-11-08'
        // this.params.mchStoreId = 6614
        this.title = JSON.parse(options.storeName) +'-设备统计'
        this.params.dayType = options.dayType
        this.params.startDateStr = options.startDateStr
        this.params.endDateStr = options.endDateStr
        this.params.mchStoreId = options.mchStoreId
        this.params.storeName =  JSON.parse(options.storeName)
        this.formatData()
      }
      // console.log(options)
		},
    onReady() {
      this.getPomHeight()
    },
		methods: {
      navStoreDeviceTurnoverDetails(item,typeId){
        // console.log('进入了吗',item)
        uni.navigateTo({
          url: "/pages-other/operation-stats/device-stats/stats-store-type"
              .concat("?mchStoreId=").concat(this.params.mchStoreId)
              .concat("&startDateStr=").concat(this.params.startDateStr)
              .concat("&endDateStr=").concat(this.params.endDateStr)
              .concat("&typeId=").concat(typeId)
              .concat("&statsType=").concat(this.statsType)
              .concat("&deviceNo=").concat(item.deviceNo)
              .concat("&storeName=").concat(JSON.stringify(this.params.storeName+'_'+item.deviceTypeName+'_'+item.deviceNo))
        })
      },
      navStoreDevice(typeId,deviceNo) {
        if(this.$u.test.isEmpty(deviceNo)){
          this.$helpers.toast('设备号不能为空');
          return
        }
        if (typeId > 28 || typeId == 11 || typeId == 12 || typeId == 16 || typeId == 17) {
          this.$helpers.toast('正在开发中，敬请期待');
          return
        }
        uni.navigateTo({
          url: "/pages-other/operation-stats/income-type/income-type"
              .concat("?typeId=").concat(typeId)
              .concat("&startDateStr=").concat(this.params.startDateStr)
              .concat("&endDateStr=").concat(this.params.endDateStr)
              .concat("&selectDayType=").concat(this.params.dayType)
              .concat("&mchStoreId=").concat(this.params.mchStoreId)
              .concat("&deviceNo=").concat(deviceNo)
        })
      },
      formatData(){
        this.findStatsStoreDeviceByApplet();
      },
      findStatsStoreDeviceByApplet() {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        // if (this.params.storeIdList.length <= 0) {
        //   this.params.storeIdList = []
        // }
        console.log(this.params)

        this.$api('statsDevice.findStatsStoreDeviceByApplet', this.params).then(res => {
          uni.hideLoading();
          this.statsStoreDeviceTypeListAll = res.data
          for (let item of  res.data) {
            this.statsStoreDeviceTypeList.push(item)
          }
        })
            .catch(err => {
              uni.hideLoading();
            })
      },
			deviceType() {
				this.$api('deviceType.curr').then(res => {
					if (res.status == 0) {
						let stat = res.data;
						console.log(stat)
						stat.forEach(item => {
							this.options1.push({
								label: item.deviceTypeName,
								value: item.id
							})
						})
					} else {
						getApp().err('请求数据不成功:' + res.msg);
					}
				})
			},

			sortChange(e) {
        if(this.statsStoreDeviceTypeList.length == 0){
          return
        }
				this.labelSortName = e.label;
				this.params.insertCoinTotalSort = e.value;
        if(e.value == 6 ){
          //金额升序
          this.statsStoreDeviceTypeList.sort((a, b) => a.turnover - b.turnover)
        }else if(e.value == 5){
          //金额升序
          this.statsStoreDeviceTypeList.sort((a, b) => b.turnover - a.turnover)
        }else if(e.value == 7){
          //机台号降序
          this.statsStoreDeviceTypeList.sort((a, b) => b.alias - a.alias)
        }else if(e.value == 8){
          //机台号升序
          this.statsStoreDeviceTypeList.sort((a, b) => a.alias - b.alias)
        }else if(e.value == 3){
          //出礼数降序
          this.statsStoreDeviceTypeList.sort((a, b) => b.giftConsume - a.giftConsume)
        }else if(e.value == 4){
          //出礼数升序
          this.statsStoreDeviceTypeList.sort((a, b) => a.giftConsume - b.giftConsume)
        }else if(e.value == 1){
          //投币数降序
          this.statsStoreDeviceTypeList.sort((a, b) => b.insertCoinTotal - a.insertCoinTotal)
        }else if(e.value == 2){
          //投币数升序
          this.statsStoreDeviceTypeList.sort((a, b) => a.insertCoinTotal - b.insertCoinTotal)
        }
			},
			typeChange(e) {
        if(this.statsStoreDeviceTypeList.length == 0){
          return
        }
				this.labelTypeName = e.label;
				this.params.deviceTypeId = e.value;
        this.statsStoreDeviceTypeList = [];
        if ( e.value == -1) {
          this.statsStoreDeviceTypeList = [...this.statsStoreDeviceTypeListAll]
        } else {
          this.statsStoreDeviceTypeList = this.statsStoreDeviceTypeListAll.filter(item => item.deviceTypeId == e.value)
        }
			},
      getPomHeight() {
        let query = wx.createSelectorQuery().in(this)
        query.select('#header').boundingClientRect()
        query.exec(res => {
          let windowHeight = wx.getSystemInfoSync().windowHeight - 32
          this.height = windowHeight
          for (let i = 0; i < res.length; i++) {
            this.height -= res[i].height;
          }
        })
      },
			// 返回上一页
			leftClick() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-grid-item {
		margin-top: 20rpx !important;
	}
	.business-hours {
		font-size: $f-base;
		padding: 40rpx;
		background: #ffffff;
	}
	.content {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		text-align: center;
	
		.card-title {
			padding: 20rpx 30rpx;
			background: rgba(63, 120, 254, 0.2);
			color: #000;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $f-lg;
			.left{
				display: flex;
				align-items: center;
			}
			.right{
				
			}
		}
	}
	
	.grid {
		padding-bottom: 20rpx;
	}
	
	.grid-title {
		color: #6072FF;
		font-size: $f-base;
		letter-spacing: 1rpx;
		margin-bottom: 5rpx;
	}
	
	.grid-text {
		color: #666;
		font-size: $f-base;
		letter-spacing: 1rpx;
	}
	
	.pay {
		color: rgb(102, 102, 102);
		letter-spacing: 1rpx;
		font-size: $f-base;
		margin-right: 14rpx;
	}
	
	.income-type {
		color: rgb(34, 34, 34);
		font-family: Roboto;
		font-size: $f-base;
		letter-spacing: 1rpx;
		// margin-left: 100rpx;
	}
</style>
